<template>
    <div class="box">
      <my-header></my-header>
      <my-footer></my-footer>
      <div class="classification">
        <p><img :src="imgs" alt=""></p>
        <ul>
          <li v-for="li in uls">{{li}}</li>
        </ul>
        <p><img :src="img" alt=""></p>
        <ul>
          <li v-for="li in uls">{{li}}</li>
        </ul>
      </div>
      <div class="bg"></div>
      <div class="recom">
        <ul>
          <li v-for="lis in Recommend">{{lis}}</li>
        </ul>
      </div>
      <div class="tui">
        <div class="right">
          <img :src="qlv" alt="">
          <p><span>{{baoyou}}</span>{{jianjie}}</p>
          <div class="jia">
            <span>折后￥40.40</span><a href="">立即抢购</a>
          </div>
        </div>
        <div class="left">
          <img :src="qlv" alt="">
          <p><span>{{baoyou}}</span>{{jianjie}}</p>
          <div class="jia">
            <span>折后￥40.40</span><a href="">立即抢购</a>
          </div>
        </div>
      </div>
      <div class="tui">
        <div class="right">
          <img :src="qlv" alt="">
          <p><span>{{baoyou}}</span>{{jianjie}}</p>
          <div class="jia">
            <span>折后￥40.40</span><a href="">立即抢购</a>
          </div>
        </div>
        <div class="left">
          <img :src="qlv" alt="">
          <p><span>{{baoyou}}</span>{{jianjie}}</p>
          <div class="jia">
            <span>折后￥40.40</span><a href="">立即抢购</a>
          </div>
        </div>
      </div>
      <my-footer></my-footer>
    </div>
</template>
<script>

import MyHeader from '@/components/MyHeader'
import MyFooter from '@/components/MyFooter'

export default {
  data () {
    return {
      imgs:'static/imgs/pageimgs/yifu.jpg',
      img:'static/imgs/pageimgs/yifu2.jpg',
      uls: ['外套毛', '外套长裤', '外套毛','妈妈装'], 
      Recommend: ['推荐', '最新', '销量'],
      qlv: 'static/imgs/pageimgs/qlv.jpg',
      baoyou: '包邮',
      jianjie: '韩版加厚仿羊羔套头卫衣',
    }
  },
  components: {
    MyFooter,
    MyHeader
  }
}
</script>

<style scoped>
.box{
  padding-bottom:50px;
}
  .classification{
    margin-top: 10px;
  }
  .classification ul{
    margin-top: 10px;
    display:flex;
  }
  .classification ul li{
    flex:1;
  }
  .classification p{
    margin-top: 10px;
  }
  .classification p img{
    width:90%;
  }
  .bg{
    height:5px;
    background:#f5f5f5;
    margin: 3px auto;
  }
  .recom ul{
    display:flex;
  }
  .recom ul li{
    flex:1;
  }
  .tui{
    display:flex;
    margin: 5px;
  }
  .tui div{
    width:45%;
    margin: 5px;
  }
  .tui div img{
    width:100%;
  }
  .tui div p{
    font-size:12px;
    margin-top:5px;
  }
  .tui div p span{
    background:red;
    border-radius: 5px;
    padding: 2px 3px;
  }
  .tui .jia{
    width:100%;
    display:flex;
    font-size:12px;
    justify-content: space-between
  }
  .tui .jia span{
    color:red;
  }
</style>
